<template>
  <ListTable
    :table-data="tableData"
    :columns-list="columnsList"
    :search-params="searchParams"
    :search-method="searchMethod"
    :multiple-selection="multipleSelection"
    :searchOption="searchOption"
    @update:searchParams="searchParams = $event"
    @update:multipleSelection="multipleSelection = $event"
  >
    <template #header_btn>
      <el-button type="primary" size="small" @click="addEdit('add')">
        <Plus
          style="width: 1em; height: 1em; margin-right: 8px"
        />添加</el-button
      >
    </template>
    <template #footer_btn>
      <el-button type="primary" size="small">底部按钮</el-button>
    </template>
  </ListTable>
  <APIForm
    ref="propForm"
    :prop-options="propOptions"
    :propform-heard="propformHeard"
    :prop-submit="propSubmit"
    :prop-select="propSelect"
  ></APIForm>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { encodeProxyData } from '/@/utils/tool'
import { commonData } from '/@/utils/commonData'
// import { useCountStore } from '/@/store'
// import { storeToRefs } from 'pinia'
// const countStore = useCountStore()
// 通过计算属性实时获取数值
// const countComputed = computed(() => countStore.count)
// 通过 storeToRefs api 结构
// const { doubleCount } = storeToRefs(countStore)

const searchParams = ref({
  page: 1,
  limit: 10,
  total: 100,
  name: '',
  userId: '',
})

const multipleSelection = ref([])

const userList = ref([])

const searchOption = ref([
  {
    type: 'input',
    key: 'name',
    label: '名称',
    default: '123',
  },
  {
    type: 'select',
    key: 'userId',
    label: '用户',
    default: 1,
    searchData: userList,
  },
])

setTimeout(() => {
  userList.value = [{ name: '123', id: 1 }]
}, 3000)

const searchMethod = () => {
  const red = encodeProxyData(searchParams.value)
  console.log(red)
}

const tableData = ref(commonData.userData || [])

const columnsList = [
  {
    type: 'selection',
    width: '50',
  },
  {
    label: '序号',
    type: 'index',
    width: '60',
  },
  {
    prop: 'name',
    label: '名称',
    width: 'auto',
    itemAttr: { asd: '123' },
    template: (data: any) => {
      return data.name
    },
  },
  {
    type: 'operation',
    label: '操作',
    width: '100',
    buttons: [
      {
        name: '修改',
        type: 'edit',
        done: (data: any) => {
          console.log(multipleSelection)
        },
      },
    ],
  },
]

const addEdit = (type: string) => {
  if (type == 'add') {
    propOptions.value.isShow = true
  }
}

// 弹窗表格
const propOptions = ref({
  title: '添加用户',
  isShow: false,
  loading: false,
  submitType: '',
  buttons: [{ type: 'save', name: '保存' }],
})

const labelWidth = '120px'

const propformHeard = ref([
  {
    hide: false,
    colSpan: 24,
    type: 'select',
    key: 'mainId',
    value: '',
    isRequired: true,
    disabled: false,
    label: '所属主体：',
    labelWidth: labelWidth,
    option: commonData.mainbody,
  },
  {
    colSpan: 24,
    type: 'input',
    key: 'name',
    value: '',
    placeholder: '请输入开户行名称',
    isRequired: true,
    disabled: false,
    label: '开户行名称：',
    labelWidth: labelWidth,
    rules: [
      { required: true, message: '请输入开户行名称', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
    ],
  },
])

const propSubmit = (d: any) => {
  console.log(d)
  console.log(tableData)
  tableData.value.push({
    date: '2016-05-02',
    name: d.name,
    address: 'No. 189, Grove St, Los Angeles',
  })
}

const propSelect = (d: any) => {
  console.log(d)
}
</script>
<style scoped></style>
